<template>
  <div :id="id" />
</template>

<script>
import E from 'wangeditor'
import { randomNum } from '@/utils/index'
import { uploadFile } from '@/api/upload'

export default {
  name: 'WangEditor',
  props: {
    height: {
      type: Number,
      default: 300
    },
    placeholder: {
      type: String,
      default: '在这里输入内容...'
    },
    zIndex: {
      type: Number,
      default: 0
    },
    maxImageSize: {
      type: Number,
      default: 5
    },
    maxVideoSize: {
      type: Number,
      default: 20
    },
    imageType: {
      type: Number,
      default: 8
    },
    imagePath: {
      type: String,
      default: '/goods/images/'
    },
    videoType: {
      type: Number,
      default: 9
    },
    videoPath: {
      type: String,
      default: '/goods/videos/'
    },
    menus: {
      type: Array,
      default() {
        return [
          'head',
          'bold',
          'fontSize',
          // 'fontName',
          'italic',
          'underline',
          'strikeThrough',
          'indent',
          'lineHeight',
          'foreColor',
          'backColor',
          'link',
          'list',
          // 'todo',
          'justify',
          'quote',
          'emoticon',
          'image',
          // 'video',
          'table',
          // 'code',
          'splitLine',
          'undo',
          'redo'
        ]
      }
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      id: 'weditor-' + randomNum(111111, 999999),
      oldValue: ''
    }
  },
  created() {
    const vm = this
    vm.oldValue = this.value
  },
  mounted() {
    const vm = this
    vm.$nextTick(() => {
      vm.initEditor()
    })
  },
  methods: {
    reset() {
      const vm = this
      if (vm.editor && vm.value !== vm.oldValue) {
        vm.editor.txt.html(vm.oldValue)
      }
    },
    initEditor() {
      const vm = this
      vm.editor = new E('#' + vm.id)

      vm.editor.config.height = vm.height
      vm.editor.config.placeholder = vm.placeholder
      vm.editor.config.focus = false
      vm.editor.config.menus = vm.menus
      vm.editor.config.zIndex = vm.zIndex
      vm.editor.config.pasteIgnoreImg = true
      vm.editor.config.uploadImgShowBase64 = false
      vm.editor.config.uploadImgTimeout = 60 * 1000

      vm.editor.config.uploadImgMaxSize = vm.maxImageSize * 1024 * 1024
      vm.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
      vm.editor.config.uploadImgMaxLength = 10
      vm.editor.config.showLinkImg = false

      vm.editor.config.uploadVideoMaxSize = vm.maxVideoSize * 1024 * 1024 * 1024
      vm.editor.config.uploadVideoAccept = ['mp4']
      vm.editor.config.showLinkVideo = false

      vm.editor.config.customUploadImg = function(resultFiles, insertImgFn) {
        resultFiles.forEach((file) => {
          var formData = new FormData()
          formData.append('file', file)
          formData.append('path', vm.imagePath)
          formData.append('fileType', vm.imageType)
          uploadFile(formData).then(res => {
            insertImgFn(res.data.data.relativePath)
          }).catch(res => {
            if (res && res.data && res.data.errno !== 0) {
              vm.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        })
      }

      vm.editor.config.customUploadVideo = function(resultFiles, insertVideoFn) {
        resultFiles.forEach((file) => {
          var formData = new FormData()
          formData.append('file', file)
          formData.append('path', vm.videoPath)
          formData.append('fileType', vm.videoType)
          uploadFile(formData).then(res => {
            insertVideoFn(res.data.data.relativePath)
          }).catch(res => {
            if (res && res.data && res.data.errno !== 0) {
              vm.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        })
      }

      vm.editor.config.onchange = function(newHtml) {
        vm.$emit('change', newHtml)
        vm.$emit('input', newHtml)
      }
      vm.editor.create()
      vm.editor.txt.html(vm.value)
    },
    result() {
      this.$emit('input', this.editor.$txt.html())
    }
  }
}
</script>

<style scoped>

</style>
